<template>
    <div class="container" ref="course1"></div>
  </template>
  
  <script lang="ts" setup>
  import * as THREE from "three";
  import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
  import { ref, onMounted } from "vue";
  
  const course1 = ref(null);
  
  onMounted(() => {
    load3D();
  });
  
  const load3D = () => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
  
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputEncoding = THREE.sRGBEncoding; // 设置输出色彩空间
    course1.value.appendChild(renderer.domElement);
  
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // 启用阻尼（惯性），使交互更平滑
    controls.dampingFactor = 0.25; // 阻尼因子
    controls.screenSpacePanning = false; // 禁用屏幕空间平移
    controls.maxPolarAngle = Math.PI / 2; // 限制垂直旋转角度，避免翻转
  
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
  
    course1.value.addEventListener("click", (event: MouseEvent) => {
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
      raycaster.setFromCamera(mouse, camera);
      const intersects = raycaster.intersectObjects(scene.children, true);
  
      if (intersects.length > 0) {
        const object = intersects[0].object;
        console.log("Clicked object:", object);
        console.log("Object properties:", object.userData);
      }
    });
  
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
    scene.add(ambientLight);
  
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    const loader = new GLTFLoader();
    loader.load(
      "./bim/bugatti.glb",
      (gltf) => {
        gltf.scene.traverse((child) => {
          if (child.isMesh) {
            // 设置纹理色彩空间
            if (child.material.map) child.material.map.encoding = THREE.sRGBEncoding;
            if (child.material.emissiveMap) child.material.emissiveMap.encoding = THREE.sRGBEncoding;
            if (child.material.map) child.material.needsUpdate = true;
  
            // 添加自定义属性到 userData
            child.userData = {
              name: child.name,
              // 如有需要，可以添加其他属性
            };
          }
        });
        scene.add(gltf.scene);
      },
      undefined,
      (error) => {
        console.error(error);
      }
    );
  
    camera.position.set(0, 3, 14); // 根据需要调整初始相机位置
  
    const animate = () => {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    };
    animate();
  
    window.addEventListener("resize", () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  };
  </script>
  
  <style scoped>
  .container {
    width: 100%;
    height: 100vh;
  }
  </style>